<template>
	<div class="container">
		<div class="row">
			<div class="col-md-10">
				<div class="title-bar">
					<div class="title">大厅</div>
					<div class="right">
						<div class="btn-group" :class="{open:state.showDropdown}">
							<button @click="changeShowDropdown" type="button" class="btn btn-default dropdown-toggle"
								data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								{{state.sortName}}
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
								<li><a href="javascript:;" @click="changeSort('star','最多收藏')">最多收藏</a></li>
								<li><a href="javascript:;" @click="changeSort('read','最多阅读')">最多阅读</a></li>
								<li><a href="javascript:;" @click="changeSort('created','最新发布')">最新发布</a></li>
							</ul>
						</div>
					</div>
				</div>

				<div>
					<article-list v-if="state.articles&&state.articles.length>0" :list="state.articles"></article-list>

					<pagination v-if="state.articles.length!=state.total" :size="state.size" :page="state.page"
						:total="state.total" @change="changePager">
					</pagination>
					<div v-else-if="state.articles.length==state.total" class="text-center">
						加载完毕
					</div>
					<div v-else class="text-center">
						暂无数据
					</div>
				</div>


			</div>
			<div class="col-md-2">
				<div class="title-bar">

					<!-- 系统默认标签 -->
					<div class="title">热门标签</div>
					<button class="btn btn-success btn-sm" @click="jumpPublish">去发布</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import pagination from '../../components/Pagination/index.vue'
	import articleList from '../../components/Article/list.vue'
	import {
		ref,
		reactive,
		toRefs,
		onBeforeMount
	} from 'vue'

	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import {
		GetArticle
	} from '../../api/article.js'
	

	const router = useRouter()
	const route = useRoute()
	
	const state = reactive({
		size: ref(10),
		page: ref(1),
		total: ref(0),
		articles: ref([]),
		showDropdown: ref(false),
		sortName: '最新发布',
		sort: 'created',
	})
	onBeforeMount(() => {
		
		if(route.query&&route.query.id){
			state.userId = route.query.id
		}
		initArticle()
	})

	const initArticle = () => {
		GetArticle({
			sort: state.sort,
			size: state.size,
			page: state.page
		}).then(({
			code,
			data,
			msg
		}) => {
			if (code == 200) {
				state.articles = data.articles
				state.total = data.total
			}
		})
	}

	const changePager = (page) => {
		state.page = page;
		initArticle()
	}
	const jumpMyArticle = () => {
		//登录鉴权
		let token = localStorage.getItem('token')
		if (!token) {
			console.log('您还未登录');
			router.push({
				path: '/login',
				query: {
					redirect: '/myArticle'
				}
			})
		} else {
			router.push('/article')
		}
	}
	const changeShowDropdown = () => {
		state.showDropdown = !state.showDropdown
	}

	const changeSort = (sort, name) => {
		state.sortName = name;
		state.sort = sort
		state.showDropdown = false
		initArticle()

	}

	const jumpPublish = ()=>{
		//登录鉴权
		let token = localStorage.getItem('token')
		if (!token) {
			console.log('您还未登录');
			router.push({
				path: '/login',
				query: {
					redirect: `/publish`
				}
			})
		} else {
			router.push(`/publish`)
		}
	}
</script>
<style>

</style>
